import React, {useEffect} from 'react';
import {useSelector} from "../../redux/hooks";
import {useDispatch} from "react-redux";
import {getHomeData} from "../../redux/slices";

export const Topic:React.FC = () => {
  const dispatch = useDispatch();
  const topics = useSelector(state => state.topic);
  useEffect(()=>{
    dispatch(getHomeData());
  },[dispatch])
  return (
    <div className="topicWrapper">
      {topics.map(topic=>{
        return (
          <div className="topicItem" key={topic.id}>
            <img className="topicPic" src={topic.imgUrl} alt="rnm"/>
            {topic.title}
          </div>
        )
      })}
    </div>
  );
};
